<template>
  <div>

    <Card>
      <template #before>
        <el-button type="primary" @click="isShowDialogFn">添加房产</el-button>
      </template>
      <template #after>
        <el-select v-model="category" placeholder="全部分类">
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
        <el-select v-model="agent" placeholder="全部经纪">
          <el-option
            v-for="item in agentsList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-input
          v-model="title_contains"
          placeholder="请输入关键字"
        />
        <el-button plain size="small" @click="searchPropertiesFn">筛选</el-button>
      </template>
    </Card>
    <el-card>
      <el-table :data="propertiesList" border>
        <el-table-column label="封面" prop="image">
          <template #default="{ row }">
            <img :src="row.image" alt="" style="height:100px">
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" />
        <el-table-column label="标签" prop="tags">
          <template #default="{row}">
            <el-tag
              v-for="item in row.tags"
              :key="item"
              type="success"
            >
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="address" />
        <el-table-column label="分类" prop="category.title" />
        <el-table-column label="经纪" prop="agent.name" />
        <el-table-column label="价格" prop="price" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="图片" prop="photos">
          <template #default="{ row }">
            <img
              v-for="(item,index) in row.photos"
              :key="index"
              style="height:100px"
              class="cover"
              :src="item"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              size="small"
              type="primary"
              @click="editProperties(row.id)"
            >编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="delProperties(row.id)"
            >删除</el-button>
          </template></el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" align="middle" justify="center" style="height:60px">
        <el-pagination
          :page-sizes="[5,10,20,30]"
          :page-size="formData._limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          :current-page.sync="page.page"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </el-row>
    </el-card>
    <!-- 弹窗 -->
    <property-edit ref="propertyData" :is-show-dialog.sync="isShowDialog" @addProperties="addPropertiesFn" />

  </div>
</template>

<script>
import { getPropertiesList, delProperties, getPropertieCount, searchPropertie } from '@/api/properties'
import { getCategoryList } from '@/api/category'
import { getAgentsList } from '@/api/agents'
// 引弹窗
import propertyEdit from './component/property-edit.vue'

export default {
  components: { propertyEdit },
  data() {
    return {
      formData: {
        _limit: 5, // 获取多少条
        _start: 0 // 从第几条开始
      },
      page: {
        page: 1,
        total: 0// 总条数
      },
      title_contains: '', // 模糊搜索
      agent: '', // 经纪id
      category: '', // 分类id
      propertiesList: [], // 房产列表
      categoryList: [], // 分类列表
      agentsList: [], // 经纪列表
      isShowDialog: false
    }
  },
  async created() {
    this.getPropertiesList()
    this.getCategoryList()
    this.getAgentsList()
    this.page.total = await getPropertieCount()
  },
  methods: {
    // 模糊搜索
    async searchPropertiesFn() {
      this.page.page = 1
      if (this.agent) {
        this.propertiesList = await getPropertiesList({
          ...this.formData,
          _start: 0,
          agent: this.agent
        })
        this.page.total = await searchPropertie({
          ...this.formData,
          _start: 0,
          agent: this.agent
        })
        return
      }
      if (this.category) {
        this.propertiesList = await getPropertiesList({
          ...this.formData,
          _start: 0,
          category: this.category
        })
        this.page.total = await searchPropertie({
          ...this.formData,
          _start: 0,
          category: this.category
        })
        return
      }
      if (this.title_contains) {
        this.propertiesList = await getPropertiesList({
          ...this.formData,
          _start: 0,
          title_contains: this.title_contains
        })
        this.page.total = await searchPropertie({
          ...this.formData,
          _start: 0,
          title_contains: this.title_contains
        })
        return
      }
      if (this.category && this.agent) {
        this.propertiesList = await getPropertiesList({
          ...this.formData,
          _start: 0,
          category: this.category,
          agent: this.agent
        })
        this.page.total = await searchPropertie({
          ...this.formData,
          _start: 0,
          category: this.category,
          agent: this.agent
        })
        return
      }
      if (this.category && this.title_contains) {
        this.propertiesList = await getPropertiesList({
          ...this.formData,
          _start: 0,
          category: this.category,
          title_contains: this.title_contains
        })
        this.page.total = await searchPropertie({
          ...this.formData,
          _start: 0,
          category: this.category,
          title_contains: this.title_contains
        })
        return
      }
      if (this.agent && this.title_contains) {
        this.propertiesList = await getPropertiesList({
          ...this.formData,
          _start: 0,
          agent: this.agent,
          title_contains: this.title_contains
        })
        this.page.total = await searchPropertie({
          ...this.formData,
          _start: 0,
          agent: this.agent,
          title_contains: this.title_contains
        })
        return
      }
      this.propertiesList = await getPropertiesList({
        ...this.formData,
        _start: 0,
        agent: this.agent,
        category: this.category,
        title_contains: this.title_contains
      })
      this.propertiesList = await getPropertiesList({
        ...this.formData,
        _start: 0,
        agent: this.agent,
        category: this.category,
        title_contains: this.title_contains
      })

      console.log('搜索得到的数据', this.propertiesList)
      console.log('搜索后得到的总条数', this.page.total)
      // this.getPropertiesList()
    },
    async handleSizeChange(page) {
      this.formData._limit = page
      this.page.total = await getPropertieCount()
      this.getPropertiesList()
    },
    // 分页按钮
    pageChange(newPage) {
      this.formData._start = (newPage - 1) * this.formData._limit
      this.getPropertiesList()
    },
    // 编辑房产
    editProperties(id) {
      this.$refs.propertyData.editProperties(id)
      this.isShowDialog = true
    },
    // 子组件通知父组件刷新页面
    addPropertiesFn() {
      this.getPropertiesList()
    },
    // 添加房产弹窗
    isShowDialogFn() {
      this.isShowDialog = true
    },

    // 删除房产
    async delProperties(id) {
      try {
        // 二次确认
        await this.$confirm('你确认删除吗?')
        // 传 id 删除
        await delProperties(id)
        // 提示用户
        this.$message.success('删除成功')
        this.getPropertiesList()
        this.page.total = await getPropertieCount()
        if (this.propertiesList.length === 1) {
          this.formData._start = this.formData._start - this.formData._limit
          this.getPropertiesList()
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 获取房产列表
    async getPropertiesList() {
      this.propertiesList = await getPropertiesList(this.formData)
    },
    // 获取分类列表
    async getCategoryList() {
      this.categoryList = await getCategoryList()
    },
    // 获取经纪列表
    async getAgentsList() {
      this.agentsList = await getAgentsList()
    }
  }
}
</script>

<style scoped>

</style>
